<template>
        <view>
                <view class="inv-h-w" >
                        <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">选项卡0</view>
                        <view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">选项卡1</view>
						<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="Inv=2">选项卡2</view>
						<view :class="['inv-h',Inv==3?'inv-h-se':'']" @click="Inv=3">选项卡3</view>
                </view>
                <view class="" v-show="Inv == 0">
					<navigator class="list"  v-for="(item , index) in list" :key="index" :url="`/pages/common/${item.url}`">
						<view class="list-img ">
							<image :src="item.img" :mode="item.mode" ></image>
						</view>
						<view class="list-txt">
							<text class="list-title">{{item.title}}</text>
							<text class="list-conner">{{item.conner}}</text>
						</view>
					</navigator>
                </view>
                <view class="" v-show="Inv == 1">
                        <navigator class="list"  v-for="(item , index) in list1" :key="index" :url="`/pages/common/${item.url}`">
                        	<view class="list-img ">
                        		<image :src="item.img" :mode="item.mode" ></image>
                        	</view>
                        	<view class="list-txt">
                        		<text class="list-title">{{item.title}}</text>
                        		<text class="list-conner">{{item.conner}}</text>
                        	</view>
                        </navigator>
                </view>
				<view class="" v-show="Inv == 2">
				        <navigator class="list"  v-for="(item , index) in list2" :key="index" :url="`/pages/common/${item.url}`">
				        	<view class="list-img ">
				        		<image :src="item.img" :mode="item.mode" ></image>
				        	</view>
				        	<view class="list-txt">
				        		<text class="list-title">{{item.title}}</text>
				        		<text class="list-conner">{{item.conner}}</text>
				        	</view>
				        </navigator>
				</view>
				<view class="" v-show="Inv == 3">
				        <navigator class="list"  v-for="(item , index) in list3" :key="index" :url="`/pages/common/${item.url}`">
				        	<view class="list-img ">
				        		<image :src="item.img" :mode="item.mode" ></image>
				        	</view>
				        	<view class="list-txt">
				        		<text class="list-title">{{item.title}}</text>
				        		<text class="list-conner">{{item.conner}}</text>
				        	</view>
				        </navigator>
				</view>
        </view>
</template>
 
<script>
        export default {
                data() {
                        return {
                                Inv:0,
								list:[
									{
										img:'https://b1-q.mafengwo.net/s16/M00/CD/52/CoUBUl8EhdqASgj6ACeEytw2L4k078.png',
										mode: 'scaleToFill',
										url: 'index',
										title:'这是一个列表的标题这是一个列表的标题这是一个列表的标题这是一个列表的标题这是一个列表的标题',
										conner:'列表内容列表内容列表内容列表内容列表这是一个列表的标题这是一个列表这是一个列表的标题这是一个列表的标题这是一个列表的标题这是一个列表的标题内容'
									},
									{
										img:'https://p1-q.mafengwo.net/s16/M00/77/6B/CoUBUl8Ak5OABruCAB6nxn2LnAY108.png',
										mode: 'scaleToFill',
										url: 'index',
										title:'这是一个列表的标题',
										conner:'列表内容列表内容列表内容列表内容列表内容'
									},
									{
										img:'http://demo.qfpffmp.cn/cssthemes6/cpts_1924_cyb/images/2.jpg',
										mode: 'scaleToFill',
										url: 'index',
										title:'这是一个列表的标题',
										conner:'列表内容列表内容列表内容列表内容列表内容 '
									}
								],
								list1:[
									{
										img:'https://b1-q.mafengwo.net/s16/M00/CD/52/CoUBUl8EhdqASgj6ACeEytw2L4k078.png',
										mode: 'scaleToFill',
										url: 'index',
										title:'这是一个列表的标题这是一个列表的标题这是一个列表的标题这是一个列表的标题这是一个列表的标题',
										conner:'列表内容列表内容列表内容列表内容列表这是一个列表的标题这是一个列表这是一个列表的标题这是一个列表的标题这是一个列表的标题这是一个列表的标题内容'
									}
								],
								list2:[
									
									{
										img:'https://p1-q.mafengwo.net/s16/M00/77/6B/CoUBUl8Ak5OABruCAB6nxn2LnAY108.png',
										mode: 'scaleToFill',
										url: 'index',
										title:'这是一个列表的标题2',
										conner:'列表内容列表内容列表内容列表内容列表内容'
									}
								],
								list3:[
									{
										img:'http://demo.qfpffmp.cn/cssthemes6/cpts_1924_cyb/images/2.jpg',
										mode: 'scaleToFill',
										url: 'index',
										title:'这是一个列表的标题3',
										conner:'列表内容列表内容列表内容列表内容列表内容 '
									}
								]
                        }
                },
                methods: {
                        changeTab(Inv){
                                that.navIdx = Inv;
                                 
                        },
						
                }
        }
</script>
         
<style  lang="scss">
	.inv-h-w {
	  border-bottom: 1px solid #f4f4f4;
	  border-top: 1px solid #f4f4f4;
	  height: 80upx;
	  display: flex;
	  letter-spacing: 3upx;
	  .inv-h{
		  font-size: 28upx;
		  flex: 1;
		  text-align: center;
		  height: 80upx;
		  line-height: 80upx;
		}
	}
	.inv-h-se {
	  color: $uni-color-primary;
	  border-bottom: 4upx solid $uni-color-primary;
	}
	.list {
	  display: flex;
	  padding: 20upx;
	  border-bottom:1px solid #F4f4f4;
	  .list-img {
	    flex: 2.5;
	    height: 160upx;
	    image {
	      width: 100%;
	      height: 100%;
		  border-radius: 8upx;
	    }
	  }
	  .list-txt {
	    flex: 7.5;
	    margin-left: 2%;
		letter-spacing: 3upx;
	    .list-title {
	      font-size: 30upx;
	      width: 100%;
	      overflow: hidden;
	      word-break: break-all;
	      text-overflow: ellipsis;
	      display: -webkit-box;
	      -webkit-box-orient: vertical;
	      -webkit-line-clamp: 1;
	      color: $uni-text-color;
	    }
	    .list-conner {
	      font-size: 25upx;
	      margin-top: 2%;
	      overflow: hidden;
	      word-break: break-all;
	      text-overflow: ellipsis;
	      display: -webkit-box;
	      -webkit-box-orient: vertical;
	      -webkit-line-clamp: 3;
	      color: $uni-text-color-grey;
	      line-height: 38upx;
	    }
	  }
	}
	.list:last-child{
		border: none;
	}
</style>